{% extends "GairalFrankCVBundle::layout.html.twig" %}

{% block bodyCV %}
<section id="skills">
    {% if listCategory %}
        <ul class="thumbnails">
        {% for category in listCategory %}
                <li class="well">
                    <h3>{{ category.name }}</h3>
                    <ul>
                {% for skill in category.skills %}
                            <li
                                id="eduXp_{{ skill.id }}"
                                data-content="
                                    {% for xp in skill.experiences %}
                                &lt;span class=&quot;label label-success&quot;&gt;{{ xp.name }}&lt;/span&gt;
                                    {% endfor %}
                                    {% for edu in skill.educations %}
                                &lt;span class=&quot;label label-important&quot;&gt;{{ edu.name }}&lt;/span&gt;
                                    {% endfor %}
                                ">
                            {% if skill.level %}
                                                        <progress value="{{ skill.level }}" max="100">{{ skill.level }}%</progress>
                            {% endif %}
                                                            <span>{{ skill.name }}</span>
                        {% if skill.description %}
                                                            <small>{{ skill.description }}</small>
                        {% endif %}
                                                        </li>
                {% endfor %}
                                                    </ul>
                                                </li>
        {% else %}
                                                no skills
        {% endfor %}
                                            </ul>
    {% endif %}
                                        </section>
{% endblock %}

{% block js %}
    <script type="application/javascript">
        $(function () { 
    {% for category in listCategory %}
        {% for skill in category.skills %}
            {% if skill.educations|length > 0 or skill.experiences|length > 0 %}
        $("#eduXp_{{ skill.id }}").popover({trigger: 'hover', html: true, placement: 'top'});
            {% endif %}
        {% endfor %}
    {% endfor %}
        });
    </script> 
{% endblock %}